<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>icon font test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/iconfont.css">
    <style>
        .icon_lists{
          width: 100% !important;
        }

        .icon_lists li{
          float:left;
          width: 100px;
          height:180px;
          text-align: center;
          list-style: none !important;
          font-size: 12px;
          margin-right: 15px;

        }
        .icon_lists .icon{
          display: block;
          text-align: center;
          font-size: 42px;
          line-height: 100px;
          margin: 10px 0;
          color:#333;
          -webkit-transition: font-size 0.25s ease-out 0s;
          -moz-transition: font-size 0.25s ease-out 0s;
          transition: font-size 0.25s ease-out 0s;

        }
        .fontclass{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
        .icon_lists .icon:hover{
          font-size: 100px;
        }
        .markdown {
          color: #666;
          font-size: 14px;
          line-height: 1.8;
        }

        .highlight {
          line-height: 1.5;
        }

        .markdown img {
          vertical-align: middle;
          max-width: 100%;
        }

        .markdown h1 {
          color: #404040;
          font-weight: 500;
          line-height: 40px;
          margin-bottom: 24px;
        }
        .name {
          font-size: 16px;
        }
        .clear:after {
          content: '\20';
          display: block;
          height: 0;
          clear: both;
        }

        .helps{margin-top:40px;}
        .helps pre{
          padding:20px;
          margin:10px 0;
          border:solid 1px #e7e1cd;
          background-color: #fffdef;
          overflow: auto;
        }
    </style>
</head>

<body>

    <h2>Icon Font </h2>
    <ul class="icon_lists clear">
      
      <li>
        <i class="icon xcfont xc-auth"> </i>
        <div class="fontclass">.xc-auth</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-business"> </i>
        <div class="fontclass">.xc-business</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-business_mng"> </i>
        <div class="fontclass">.xc-business_mng</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-business_num"> </i>
        <div class="fontclass">.xc-business_num</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-checked"> </i>
        <div class="fontclass">.xc-checked</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-device"> </i>
        <div class="fontclass">.xc-device</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-edit"> </i>
        <div class="fontclass">.xc-edit</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-home"> </i>
        <div class="fontclass">.xc-home</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-img-o"> </i>
        <div class="fontclass">.xc-img-o</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-img"> </i>
        <div class="fontclass">.xc-img</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-left"> </i>
        <div class="fontclass">.xc-left</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-logout"> </i>
        <div class="fontclass">.xc-logout</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-material_mng"> </i>
        <div class="fontclass">.xc-material_mng</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-menu"> </i>
        <div class="fontclass">.xc-menu</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-plus-circle-fill"> </i>
        <div class="fontclass">.xc-plus-circle-fill</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-plus-circle"> </i>
        <div class="fontclass">.xc-plus-circle</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-plus"> </i>
        <div class="fontclass">.xc-plus</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-portrait"> </i>
        <div class="fontclass">.xc-portrait</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-program"> </i>
        <div class="fontclass">.xc-program</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-program_mng"> </i>
        <div class="fontclass">.xc-program_mng</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-program_num"> </i>
        <div class="fontclass">.xc-program_num</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-publish"> </i>
        <div class="fontclass">.xc-publish</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-right"> </i>
        <div class="fontclass">.xc-right</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-right1"> </i>
        <div class="fontclass">.xc-right1</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-right2"> </i>
        <div class="fontclass">.xc-right2</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-right3-fill"> </i>
        <div class="fontclass">.xc-right3-fill</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-right3"> </i>
        <div class="fontclass">.xc-right3</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-statistics"> </i>
        <div class="fontclass">.xc-statistics</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-system"> </i>
        <div class="fontclass">.xc-system</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-terminal"> </i>
        <div class="fontclass">.xc-terminal</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-terminal_mng"> </i>
        <div class="fontclass">.xc-terminal_mng</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-time"> </i>
        <div class="fontclass">.xc-time</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-upload"> </i>
        <div class="fontclass">.xc-upload</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-user"> </i>
        <div class="fontclass">.xc-user</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-video-o"> </i>
        <div class="fontclass">.xc-video-o</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-video"> </i>
        <div class="fontclass">.xc-video</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-wechatpay2"> </i>
        <div class="fontclass">.xc-wechatpay2</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-write-fill"> </i>
        <div class="fontclass">.xc-write-fill</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-write"> </i>
        <div class="fontclass">.xc-write</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-已审批"> </i>
        <div class="fontclass">.xc-已审批</div>
      </li>
      
      <li>
        <i class="icon xcfont xc-画板 1"> </i>
        <div class="fontclass">.xc-画板 1</div>
      </li>
      
    </ul>

   <div style="clear: both;">
     <h2>Use Icon Font</h2>
     <pre>
      &lt;span class=&quot;iconfont icon-add&quot;&gt;&lt;/span&gt;
     </pre>
   </div>
   <div class="helps">
            第一步：使用font-face声明字体
            <pre>@font-face {font-family: 'iconfont';
        src: url('iconfont.eot'); /* IE9*/
        src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('iconfont.woff') format('woff'), /* chrome、firefox */
        url('iconfont.ttf') format('truetype')/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/;
    }
    </pre>
    第二步：定义使用iconfont的样式
                <pre>.iconfont{
        font-family:"iconfont" !important;
        font-size:16px;font-style:normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;}
    </pre>
    第三步：挑选相应图标并获取字体编码，应用于页面
    <pre>&lt;i class="iconfont"&gt;&amp;#x33;&lt;/i&gt;
    </pre>
  </div>
</body>
</html>
